<template>
	<view class="produce">
		<image :src="produce.productImage" mode="aspectFill" :style="{'backgroundColor':produce.backgroundColor.primaryColor}"></image>
		<view class="productName">{{produce.productName.text}}</view>
		<view class="price">￥{{produce.price.text}}</view>
	</view>
</template>

<script>
	export default{
		props:{
			produce:{
				type:Object,
			}
		}
	}
</script>

<style lang="scss">
	.produce{
		width: 335rpx;
		image{
			width: 335rpx;
			height: 335rpx;
		}
		.productName{
			white-space: nowrap;
			overflow: hidden;
			width: 100%;
			text-overflow: ellipsis;
			line-height: 1.5;
			font-size: $uni-font-size-sm;
		}
		.price{
			font-size: $uni-font-size-sm;
		}
	}

</style>